<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/css/common.css" />
		<link rel="stylesheet" type="text/css" href="/js/flatpickr.min.css" />
		<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.7/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="/dialog/css/dialog.css" />
		<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="/css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" type="text/css" href="/css/pager.css" />
		<link rel="stylesheet" href="/css/shoufengqin.css">
		<link rel="stylesheet" type="text/css" href="/css/haha.css" media="screen" />
		<link rel="stylesheet" href="/css/b.page.bootstrap3.css" type="text/css"/>
	</head>

	<body>
		<!--顶部导航 -->
		<nav class="topNavItemBox">
			<div id="ItemBox">
				<div class="title">智慧溯源系统</div>
				<div class="subtitle">肉品溯源管理</div>
				<div class="rightUserInfo">
					<div class="commentAvatarDiv">
						<img class="commentAvatarImage" src="#">
					</div>
					<div class="userName">Jason Wong</div>
					<span class="glyphicon glyphicon-option-vertical userIcon" aria-hidden="true"></span>
				</div>
			</div>
		</nav>
        <!--检疫查询 -->
        <div class="contain">
        	<!-- 左侧导航 -->
			<div class="left1">
				<div class="list22">
					<ul>
						<li>
							<p class="title22">Item1</p>
							<ul class='list-se'>
								<p class="title22">Item1</p>
								<li><p>li-1</p></li>
							</ul>
						</li>
						<li>
							<p class="title22">Item2</p>
							<ul class='list-se'>
								<p class="title22">Item2</p>
								<li><p>li-1</p></li>
								<li><p>li-2</p></li>
								<li><p>li-3</p></li>
								<li><p>li-4</p></li>
								<li><p>li-5</p></li>
								<li><p>li-6</p></li>
							</ul>
						</li>
						<li>
							<p class="title22">Item3</p>
							<ul class='list-se'>
								<p class="title22">Item3</p>
								<li><p>li-1</p></li>
								<li><p>li-2</p></li>
								<li><p>li-3</p></li>
							</ul>
						</li>
						<li>
							<p class="title22">Item4</p>
							<ul class='list-se'>
								<p class="title22">Item4</p>
								<li><p>li-1</p></li>
								<li><p>li-2</p></li>
								<li><p>li-3</p></li>
							</ul>

						</li>
						<li>
							<p class="title22">foot5</p>
						</li>
					</ul>
				</div>
			</div>
			<div id="middle1" class="page_main">
				<!-- <h3>饲料库存管理</h3><span class="add_link"><a href="feedsAdd.ftl">新增饲料></a></span> -->
				<div id="middle2" class="page_content"> 
					<div class="buttonGroup">
						<button type="button" class="btn btn-primary btn-sm">新增饲料入库信息</button>
						<button type="button" class="btn btn-danger btn-sm">删除</button>
						<button type="button" class="btn btn-info btn-sm">修改</button>
					</div>
					<div class="searchGroup">
						<span>日期范围</span>
	            		<input type="text" placeholder="请输入日期范围" class="bigInputtext" id="test1">
						<button type="button" class="btn btn-info btn-sm">搜索</button>
					</div>
					
					<table class="table table-striped table-bordered table-hover table-condensed">
						<thead>
							<tr>
								<th class="selectColumn" >选择</th>
								<th>登录名</th>
								<th>姓名</th>
								<th>性别</th>
								<th>出生年月</th>
								<th>电话</th>
								<th>电子邮箱</th>
								<th>状态</th>
								<th>更新时间</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="selectColumn"><input type="radio" name="userSelect" value="$ {d.id}" /></td>
								<td class="tableElem">$ {d.login_name}</td>
								<td class="tableElem">$ {d.name}</td>
								<td class="tableElem">$ {d.sexName}</td>
								<td class="tableElem">$ {d.birthday}</td>
								<td class="tableElem">$ {d.phone1}</td>
								<td class="tableElem">$ {d.email}</td>
								<td class="tableElem">$ {d.statusName}</td>
								<td width="140">
									<div class="tableButtonGroup">
										<button type="button" class="btn btn-info btn-sm">修改</button>
										<button type="button" class="btn btn-danger btn-sm">删除</button>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="paginationFoot">
						<ul class="pagination" id="page2">
					    </ul>
						<div class="pageJump">
							<span>跳转到</span>
							<input type="text"/>
							<span>页</span>
							<button type="button" class="button">确定</button>
						</div>
					</div>
					<!-- <div class="table-responsive">
						<table id="feedsInfo_table" class="table table-bordered" width="100%">
							<thead>
								<tr>
									<th></th>
									<th width="100">饲料名称</th>
									<th width="100">饲料类型</th>
									<th width="200">总量</th>
									<th width="100">已用量</th>
									<th width="120">库存量</th>
									<th width="120">企业名称</th>
									<th width="130">企业负责人</th>
									<th width="120">企业联系方式</th>
									<th width="120">描述</th>
									<th width="150">最近一次操作</th>
									<th width="150">操作</th>
								</tr>
							</thead>
						</table>
					</div> -->
					<!-- <div id="barcon" name="barcon" style="margin-left: 200px;font-size:10px"></div> -->
					<!-- <input type="button" id="deleteAllchoice" value="删除所选"> -->
				</div>
				
			</div>
		
		</div>
		<!-- <iframe src="left.ftl" frameborder="0"></iframe> -->
		<!-- <#include "left.ftl"/> -->
		<div class="footer">
			<div class="footer_lineone">
				<span id="logo"></span>肉品溯源管理系统 
				<span class="footer_lineoneSpan"><a href="aboutus.html">关于我们</a></span>
				<span class="footer_lineoneSpan"><a target="_blank" href="http://www.cfsiw.com/">食品安全信息</a></span> 
				<span class="footer_lineoneSpan"><a href="suggestionAdd.ftl">联系我们</a></span>
			</div>
			<div class="footer_linetwo">
				 &copy;2017广东技术师范学院
			</div>
		</div>	

		<script src="/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/google-maps.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/jquery.form.js"></script>
		<script src="/dialog/js/dialog.js"></script>
		<script src="/js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script language="javascript" type="text/javascript"  src="/js/WdatePicker.js"></script>
		<script src="/js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="/laydate/laydate.js"></script> <!-- 改成你的路径 -->
		<script type="text/javascript" src="/js/b.page.js" ></script>
		<script src="/js/pager.js"></script>
		<script src="/js/shoufengqin.js"></script>
		<script src="/js/flatpickr.js">
		</script>
		<script type="text/javascript" charset="UTF-8">
			$(function() {
				//初始化侧边栏
				$(".vertical-nav").verticalnav({
					speed: 400,
					align: "left"
				});

				var re_data; //每次传过来的数据
				//查询
				$("#feedsInfo_query").ajaxForm(function(data) {
					console.log(data);
					re_data = data;
					$("#feedsInfo_table tbody tr").remove();
					for(var i = 0; i < data.length; i++) {
						var no = i+1;
						var tb = $("#feedsInfo_table tbody");
						//<input type="checkbox" name="selectRows" class="isCheck" value="' + data[i].feedId + '"/>
						var td1 = '<td>'+ no +'</td>';
						var td2 = '<td>' + data[i].feedName + '</td>';
						var td3 = '<td>' + data[i].component + '</td>';
						var td4 = '<td>' + data[i].inQuantity + '</td>';
						var td5 = '<td>' + data[i].outQuantity + '</td>';
						var td6 = '<td>' + data[i].amountStore + '</td>';
						var td7 = '<td>' + data[i].compName + '</td>';
						var td8 = '<td>' + data[i].contact + '</td>';
						var td9 = '<td>' + data[i].contactPhone + '</td>';
						var td10 = '<td>' + data[i].remark + '</td>';
						var td11 = '<td>' + data[i].updateTime.replace("T", " ") + '</td>';
						var td12 = '<td><input type="button" onclick="updateData(' + i + ')" class="change" value="更改" style="padding:0 5px"/></td>'
						//var td13 = '<td><input type="button" value="删除" class="deleteIns" onclick="deleteIns(' + data[i].gid + ')" style="padding:0 5px" /></td>'
						var tr_add = '<tr id="feedsInfo_row' + data[i].feedId + '">' + td1 + td2 + td3 + td4 + td5 + td6 + td7 + td8 + td9 + td10 + td11 + td12 + '</tr>'
						tb.append(tr_add);
					}
					$("#no_data").remove();
					goPage(1,4,"feedsInfo_table");
				});

				//时间选择组件1
				laydate.render({
				  elem: '#test1' //指定元素
				   ,range: true
				});
				
				//分页组件 
				Page({
					num:7,					//页码数
					startnum:6,				//指定页码
					elem:$('#page2'),		//指定的元素
					callback:function(n){	//回调函数
						console.log(n);
					}
				});

				jQuery(document).ready(function($) 
				{
					$('.list22 ul li p').clickdown();
					$('.list-se p[class=title22]').clickup();
					$('.list22>ul>li').ad();
				});

				//更改

				updateData = function(i) {
					var row0 = '<form id="feedsInfo_updateform" action="FeedsAction_update" method="post"><ul class="changePage500">'
					var row1 = '<li><label class="labelBeforinput">饲料名称</label><input name="feedName" require class="bigInputtext" type="text" value="' + re_data[i].feedName + '" /></li>';
					var row2 = '<li><label class="labelBeforinput">饲料类型</label><input name="component" require class="bigInputtext" type="text" value="' + re_data[i].component + '" /></li>';
					var row3 = '<li><label class="labelBeforinput">物品描述</label><input name="remark" require class="bigInputtext" type="text" value="' + re_data[i].remark + '" /></li></ul>';
					var row4 = '<input type="hidden" name="feedId" value="' + re_data[i].feedId + '" />';
					var row5 = '<input type="hidden" name="gid" value="' + re_data[i].gid + '" />';
					var row6 = '<input type="hidden" name="supplierId" value="' + re_data[i].supplierId + '" />';
					var row7 = '<input type="hidden" name="amountStore" value="' + re_data[i].amountStore + '" />';
					var row8 = '<input type="hidden" name="compName" value="' + re_data[i].compName + '" />';
					var row9 = '<input type="hidden" name="contact" value="' + re_data[i].contact + '" />';
					var row10 = '<input type="hidden" name="contactPhone" value="' + re_data[i].contactPhone + '" />';
					var row11 = '<input type="hidden" name="inQuantity" value="' + re_data[i].inQuantity + '" />';
					var row12 = '<input type="hidden" name="outQuantity" value="' + re_data[i].outQuantity + '" />';
					var row13 = '</form>'
					var str = row0 + row1 + row2 + row3 + row4 + row5 + row6 + row7 +row8+ row9 + row10 + row11 + row12 + row13;
					//console.log($("#feedsInfo_table"));

					$.dialog({
						type: 'confirm',
						titleText: '更改数据',
						contentHtml: str,
						onClickOk: function() {
							$("#feedsInfo_updateform").ajaxSubmit({
								type: 'post',
								success: function(data) {
									$.dialog({
									       type : 'info',
									       contentHtml : '<img class="info-icon" src="dialog/images/icon/success.png" alt="更新成功" /><p class="info-text">更新成功</p>',
									       autoClose : 2000
									    });
									console.log(data);
									var row = $("#feedsInfo_row" + data.feeds.feedId);
									console.log(row);
									row.find("td").eq(1).text(data.feeds.feedName);
									row.find("td").eq(2).text(data.feeds.component);
									row.find("td").eq(3).text(data.feeds.inQuantity);
									row.find("td").eq(4).text(data.feeds.outQuantity);
									row.find("td").eq(5).text(data.feeds.amountStore);
									row.find("td").eq(6).text(data.feeds.compName);
									row.find("td").eq(7).text(data.feeds.contact);
									row.find("td").eq(8).text(data.feeds.contactPhone);
									row.find("td").eq(9).text(data.feeds.remark);
									row.find("td").eq(10).text(data.feeds.updateTime.replace("T", " "));
									
									re_data[i] = data.feeds;
								}

							});
						}

					});
					//时间控制器
					
					//表单校验
					$("#feedsInfo_updateform").validate();
				}

			});
		</script>

	</body>
	<style type="text/css">
		#test1{
			width: 155px;
			height: 30px;
		}
		.buttonGroup{
			display: inline-block;
			margin-bottom: 20px;
		}
		.searchGroup{
			display: inline-block;
			float: right;
		}
		.tableButtonGroup{
			text-align: center;
		}
		.paginationFoot{
			text-align: center;
		}
		.contain{
			overflow: hidden;
		}
		.contain #middle1{
            width:100%;
            margin-left:-200px;
            float:left;
            overflow: hidden;
        }
        .contain #middle2{
            margin-left: 280px;
    		margin-right: 30px;
        }
        .contain .left1{
            width:200px;
            float:left;
            min-width: 200px;
        }
	</style>
</html>